<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.inner{
				height: 150px;
				background-color: darkcyan;
			}
			.outer{
				padding: 40px;
				background-color: red;
			}
		</style>
	</head>
	<!-- 
	 事件绑定-参数传递
	 1、如果直接绑定函数名称，那么默认会传递事件对象作为第一个参数
	 2、如果事件绑定参数传递，则事件对象必须作为最后一个参数显示传递，并且名称为 $event
	 
	 
	 
	 
	 -->
	<body>
		<div id="app">
			<!--.stop .capture .prevent .self .once -->
			<!-- 使用.capture使用捕获模式 -->
			<!-- <div class="inner" @click.capture="divClick"> -->
			<!--使用.self实现只有点击当前元素时才触发事件，阻止当前元素的冒泡行为  -->
			<div class="outer" @click="outerClick">
				<div class="inner" @click.self="divClick"><!-- .self只阻止自己的冒泡行为 -->
					<!-- 使用.stop阻止冒泡 -->
					<input type="button" :value="msg" @click="btnClick"	/>
					<!-- 事件传参 $event是指当前触发的是什么事件（鼠标事件，键盘事件等）-->
					<input type="button" :value="msg" @click="btnClick2(123,456,$event)"	/>
					<!-- 使用.prevent阻止默认行为,使用.once设置只触发一次 -->
					<a href="https://www.baidu.com" @click.prevent.once="linkClick">有问题先去百度</a>
				</div>
			</div>
			<form action="" >
				<div>
					<div>
						用户名：
						<input type="text" @keyup.enter="handleSumbmit" v-model:value="uname"/>
					</div>
					<div>
						密码：
						<input type="password" v-model:value="pwd"/>
					</div>
					
					<input type="button" value="提交" @click="handleSumbmit"/>
				</div>
				
			</form>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'戳一下',
					uname:'',
					pwd:''
				},
				methods:{
					divClick(){
						console.log('触发了div点击事件')
					},	
					btnClick(){
						console.log('触发了btn点击事件')
					},
					linkClick(e){
						console.log("触发了连接点击事件")
						// 原生阻止默认行为
						e.preventDefault();
					},
					outerClick(event){
						console.log('触发了out点击事件');
						alert('div')
						
					},
					btnClick2(a,b,event){
						
						console.log(a,b,event.target.innerHTML);
						// 原生阻止冒泡
						event.stopPropagation();
						
						alert('input')
					},
					handleSumbmit(){
						console.log(this.uname,this.pwd)
					}
				}
			});
		</script>
	</body>
</html>
